<template>
  <div class="bg">
    <el-card class="box-card">
      <el-row type="flex" class="row-bg" justify="end">
        <el-col :span="4" :offset="3">
          <el-select v-model="value" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-input style="width:220px" v-model="selectCode" placeholder="用户昵称/电话号码/求助主题查询"></el-input>
        </el-col>
        <el-col :span="6">
          <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
        </el-col>

        <el-col :span="4">
          <div style="display:flex">
            <el-button type="primary" @click="searchDate">查询</el-button>
            <el-button type="success" @click="reset">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 表格展示 -->
    <el-card class="card">
      <div slot="header">
        <el-row type="flex" justify="space-between">
          <el-col :span="2" :offset="22">
            <el-button type="success" @click="exports">导出数据</el-button>
          </el-col>
        </el-row>
      </div>
      <!-- 表格展示 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="index" type="index" width="100" label="序号" align="center"></el-table-column>
        <el-table-column prop="userName" :show-overflow-tooltip="true" label="求助者" align="center"></el-table-column>
        <el-table-column prop="helperType" label="求助类型" align="center"></el-table-column>
        <el-table-column prop="helperName" :show-overflow-tooltip="true" label="求助主题" align="center"></el-table-column>
        <el-table-column prop="helperDesc" :show-overflow-tooltip="true" label="求助内容" align="center"></el-table-column>
        <el-table-column prop="helpStartDate" :show-overflow-tooltip="true" label="时间" align="center"></el-table-column>
        <el-table-column prop="helperAddress" :show-overflow-tooltip="true" label="地点" align="center"></el-table-column>
        <el-table-column prop="helperReward" label="奖励" align="center"></el-table-column>
        <el-table-column prop="helperTime" :show-overflow-tooltip="true" label="创建时间" align="center"></el-table-column>
        <el-table-column prop="helperStatus" label="状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.helperStatus==1">发布中</span>
            <span v-if="scope.row.helperStatus==2">进行中</span>
            <span v-if="scope.row.helperStatus==3">待评价</span>
            <span v-if="scope.row.helperStatus==4">已完成</span>
            <span v-if="scope.row.helperStatus==5">已评价</span>
            <span v-if="scope.row.helperStatus==6">已撤回</span>
            <span v-if="scope.row.helperStatus==7">已采纳</span>
            <span v-if="scope.row.helperStatus==8">已删除</span>
          </template>

        </el-table-column>
        <el-table-column prop="helperApplyNumber" label="申请帮助" align="center">
          <template slot-scope="scope">
            <div style="color: #50bfff ;cursor: pointer" @click="open(scope.row)">{{ scope.row.helperApplyNumber }}</div>
          </template>
        </el-table-column>


        <el-table-column fixed="right" label="操作" width="280" align="center">
          <template slot-scope="scope">
            <el-button @click="look(scope.row)" type="primary" size="small">查看/编辑</el-button>
            <!--            <el-button @click="jieSan(scope.row)" type="primary" size="small">解散</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
          background
          layout="total,  prev, pager, next, jumper"
          :total="total"
          :current-page="current"
          :page-size="size"
          @current-change="handleCurrentChange"
          style="margin-top:24px"
      ></el-pagination>
    </el-card>

    <!--    详情-->
    <el-dialog
        title=""
        v-if="dialogVisible"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
      <div>
        <div style="margin-bottom:10px">{{ userList.userName }}发起了求助：</div>
        <div style="padding-left: 20px">

          <el-input style="margin-bottom:10px; font-size: 20px;" v-model="userList.helperName"
                    placeholder="请输入内容"></el-input>

          <div style="margin-bottom:10px"><span style="margin-right: 10px">{{ userList.petVariety }}</span>
            {{ userList.helpStartDate }} <span style="margin-right: 20px ;font-size: 18px ;color: red">{{
                userList.helperReward
              }} 金币</span></div>
          <div style="margin-bottom:10px">{{ userList.helperAddress }}</div>
          <el-input style="margin-bottom:10px" v-model="userList.helperDesc" placeholder="请输入内容"></el-input>
          <div style="margin-bottom:10px">
            <el-upload
                list-type="picture-card"
                :action="upadteurl"
                :file-list="newImg"
                :on-success="merchantPhoto"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">

              <i class="el-icon-plus"></i>
            </el-upload>
            <!--          <el-dialog :visible.sync="imgDialogVisible">-->
            <!--                        <img width="100%" :src="dialogImageUrl" alt="">-->
            <!--          </el-dialog>-->
          </div>
          <div style="margin-bottom:10px">申请信息 <span
              style="color: #50bfff ; margin-left: 10px">{{ userList.helperApplyNumber }}</span></div>
          <el-divider></el-divider>
          <div>{{ userList.applyUserName }}
            <span v-if="userList.helperStatus ==1">发布中</span>
            <span v-if="userList.helperStatus==2">进行中</span>
            <span v-if="userList.helperStatus==3">待评价</span>
            <span v-if="userList.helperStatus==4">已完成</span>
            <span v-if="userList.helperStatus==5">已评价</span>
            <span v-if="userList.helperStatus==6">已撤回</span>
            <span v-if="userList.helperStatus==7">已采纳</span>
            <span v-if="userList.helperStatus==8">已删除</span>
          </div>
        </div>

      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose()">取 消</el-button>
    <el-button type="primary" @click="bianJi()">确 定</el-button>
  </span>
    </el-dialog>

    <!--     互助点击详情-->
    <el-dialog
        title="申请帮助"
        :visible.sync="helpDialogVisible"
        width="50%"
        :before-close="helpDialogVisibleHandleClose">
      <div>
        <el-table :data="helpTableData" border style="width: 100%">
          <el-table-column prop="index" type="index" width="100" label="序号" align="center"></el-table-column>
          <el-table-column prop="userName" :show-overflow-tooltip="true" label="用户昵称" align="center"></el-table-column>
          <el-table-column prop="helperCreateTime" :show-overflow-tooltip="true" label="申请时间"
                           align="center"></el-table-column>
          <el-table-column prop="gradeName" label="等级名称" align="center"></el-table-column>
          <el-table-column prop="helperAdopt" label="是否采纳" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.helperAdopt==1">未采纳</span>
              <span v-if="scope.row.helperAdopt==2">已采纳</span>
            </template>
          </el-table-column>
          <el-table-column prop="helperDesc" :show-overflow-tooltip="true" label="申请描述"
                           align="center"></el-table-column>
          <el-table-column prop="helperStatus" label="申请状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.helperStatus==1">有效</span>
              <span v-if="scope.row.helperStatus==2">无效</span>
            </template>
          </el-table-column>
          <el-table-column prop="userServiceIntegral" label="当前服务积分" align="center"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            background
            layout="total,  prev, pager, next, jumper"
            :total="helptotal"
            :current-page="helpCurrent"
            :page-size="hlepSize"
            @current-change="helpHandleCurrentChange"
            style="margin-top:24px"
        ></el-pagination>
      </div>

      <span slot="footer" class="dialog-footer">
    <el-button @click="helpDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="helpDialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>


  </div>
</template>

<script>
import base from "@/views/api/base";
import {export2Excel} from "@/components/commom";

export default {
  name: "helperlist",
  data() {
    return {
      helperId: "",
      hlepSize:10,
      newImg: [],
      imgDialogVisible: false,
      upadteurl: "", //图片上传地址
      userList: [],
      dialogVisible: false,
      helpDialogVisible: false,
      options: [{
        value: 1,
        label: '发布中'
      }, {
        value: 2,
        label: '进行中'
      }, {
        value: 3,
        label: '待评价'
      }, {
        value: 4,
        label: '已完成'
      }, {
        value: 5,
        label: '已评价'
      }, {
        value: 6,
        label: '已撤回'
      }, {
        value: 7,
        label: '已采纳'
      }, {
        value: 8,
        label: '已删除'
      }],
      value: "",
      value1: "",
      downloadLoading: false,
      tableData: [],
      merchantTotal: {}, //商家统计信息
      total: 0, //总条数
      size: 10,
      current: 1, //第一页的数据加载
      selectCode: "", //查询条件
      selectCode1: "",
      firstdata: "", //开始时间
      endtime: "", //结束时间,
      helpCurrent: 1,
      helptotal: 0, //总条数
      helpSize: 10,
      helpTableData: []
    };
  },
  mounted() {
    this.getHelperlist()
    this.upadteurl = base.sq + "/yuanjiu/upload/uploadImg";

  },
  methods: {
    open(row) {
      this.helpDialogVisible = true
      this.helperId = row.helperId
      let param = {
        helperId: row.helperId,
        size: this.hlepSize,
        current: this.helpCurrent,
      };
      this.$http.article.getHelpList(param).then(res => {
        this.helpTableData = res.result.records; //加载数据
        this.helptotal = res.result.total; //总条数
      });
    },
    helpDialogVisibleHandleClose() {
      this.helpDialogVisible = false
    },
    // 获取商户列表
    getHelperlist() {
      let param = {
        size: this.size,
        current: this.current,
        selectCode: this.selectCode,
        selectCode1: this.selectCode1,
        startDate: this.value1[0],
        endDate: this.value1[1],
        status: this.value,
        ofjson: 'json'
      };
      this.$http.article.getMutualAid(param).then(res => {
        this.tableData = res.result.records; //加载数据
        this.total = res.result.total; //总条数
        console.log("获取商户列表", this.tableData);

      });
    },
    // 查询功能
    searchDate() {
      this.current = 1; //模糊查询
      this.getHelperlist();
    },
    // 分页功能
    handleCurrentChange(val) {
      this.current = val;
      this.getHelperlist();
    },
    // 分页功能
    helpHandleCurrentChange(val) {
      this.helpCurrent = val;
      let param = {
        helperId: this.helperId,
        size: this.hlepSize,
        current: this.helpCurrent,
      };
      this.$http.article.getHelpList(param).then(res => {
        this.helpTableData = res.result.records; //加载数据
        this.helptotal = res.result.total; //总条数
      });
    },
    // 重置功能
    reset() {
      this.selectCode = ""; //查询条件
      this.selectCode1 = ""; //查询条件
      this.value1 = ""; //开始时间
      this.value = ""
      // 重新加载数据
      this.getHelperlist();
    },
    //查看
    look(row) {
      this.newImg =[]
      this.helperId = row.helperId
      this.dialogVisible = true
      let list = {
        helperId: row.helperId
      }
      this.$http.article.xqMutualAid(list).then(res => {
        this.userList = res.result
        console.log('this.userList', this.userList)
        if (res.result.mediaList.length > 0) {
          res.result.mediaList.map((x) => {
            console.log(x)
            this.newImg.push({
              name: x,
              url: x
            })
          })
        }
      });

    },
    // 照片
    merchantPhoto(res) {
      this.newImg.push({
            name: res.result,
            url: res.result
          }
      )
      console.log('上传成功', this.newImg)
    },
    //轮播图
    handleRemove(file, fileList) {
      // let index = fileList.indexOf(file);
      // this.newImg = this.newImg.splice(index, 1);
      this.newImg =fileList
    },
    handlePictureCardPreview(file) {
      console.log('file.url', file.url)
      this.dialogImageUrl = file.url;
      this.imgDialogVisible = true;
    },
    bianJi() {
      console.log('修改', this.newImg)
      let urlList = []
      this.newImg.forEach((x) => {
        urlList.push(x.url)
      });
      let list = {
        helperId: this.helperId,
        mediaList: urlList,
        helperName: this.userList.helperName,
        helperDesc: this.userList.helperDesc
      }
      console.log(list)
      this.$http.article.xgMutualAid(list).then(res => {
        this.$message.success('修改成功')
        this.dialogVisible = false
        this.getHelperlist()
      });
    },
    handleClose() {
      this.newImg = []
      this.dialogVisible = false
    },
    gbDialog() {

    },
    //   导出
    exports() {
      this.getHelperlist();
      const hader = [
        {
          title: "求助者",
          date: "userName"
        },
        {
          title: "求助类型",
          date: "helperType"
        },
        {
          title: "求助主题",
          date: "helperName"
        },
        {
          title: "求助内容",
          date: "helperDesc"
        },
        {
          title: "时间",
          date: "helpStartDate"
        },
        {
          title: "地点",
          date: "helperAddress"
        },
        {
          title: "奖励",
          date: "helperReward"
        },
        {
          title: "创建时间",
          date: "helperTime"
        },
        {
          title: "状态",
          date: "helperStatus"
        }
      ];

      const excelName = "帮帮互助管理";

      let param = {
        size: 10,
        current: this.current,
        selectCode: this.selectCode,
        selectCode1: this.selectCode1,
        startDate: this.value1[0],
        endDate: this.value1[1],
        status: this.value,
      };
      this.$http.article.getMutualAid(param).then(res => {
        const list = res.result.records.map(item => {
          console.log('item', item)
          //因为有枚举类型，所以这里对数据进行处理
          if (item.helperStatus) {
            switch (item.helperStatus) {
              case  1:
                item.helperStatus = "发布中"
                break;
              case  2:
                item.helperStatus = "进行中"
                break;
              case  3:
                item.helperStatus = "待评价"
                break;
              case  4:
                item.helperStatus = "已完成"
                break;
              case  5:
                item.helperStatus = "已评价"
                break;
              case  6:
                item.helperStatus = "已撤回"
                break;
              case  7:
                item.helperStatus = "已采纳"
                break;
              case  8:
                item.helperStatus = "已删除"
                break;
            }
          }
          return item;
        });
        export2Excel(hader, list, excelName);
      });
    },


  }
}
</script>

<style scoped lang="scss" scoped>
.merchantData {
  display: flex;
  align-items: center;
  padding-top: 14px;

  .addmerchant {
    color: #409eff;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
  }

  .merchantNum {
    color: #f23a3a;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 800;
  }
}

.clearfix {
  padding-bottom: 20px;
}

.bg {
  width: 100%;
  height: 100%;
  background-color: #f4f7fd;
  padding-top: 10px;
}

.box-card {
  width: 98%;
  height: 80px;
  margin: 0 auto;
}

.card {
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;
}
</style>